<template>
  <div class="allpage">
    <el-form
      :inline="true"
      :model="formInline"
      label-width="100px"
      class="gor-top form-style"
      ref="formInline"
    >
    <el-row>
      <el-col>
        <el-form-item prop="order" style="margin:15px 0 15px 30px">
        <el-input v-model="formInline.order" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item prop="time" style="margin:15px 0 15px 30px">
         <el-date-picker
          @change="getSTimes"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          v-model="formInline.time"
          type="date"
          placeholder="下单时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="供应商：" prop="region" style="margin:15px 0 15px 30px">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option v-for="(Supitem,Supindex) in optionsss" :key="Supindex" :label="Supitem.SupplierName" :value="Supitem.SupplierId"></el-option>
        </el-select>
      </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-form-item label="订单状态：" prop="region" style="margin:15px 0 15px 30px">
        <el-select v-model="formInline.region" placeholder="全部">
          <el-option :label="opitem.label" v-for="(opitem,opindex) in optionss" :key="opindex" :value="opitem.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单类型：" prop="region1" style="margin:15px 0 15px 30px">
        <el-select v-model="formInline.region1" placeholder="全部">
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin:15px 0 15px 30px">
        <el-button icon="el-icon-refresh" type="warning" @click="clean('formInline')">重置</el-button>
        <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      </el-col>
    </el-row>
      
    </el-form>
    <div class="gor-mid table-style">
      <el-table :data="tableData">
        <el-table-column label="商品" width="300">
          <template slot-scope="scope">
            <div class="gor-mid-good">
              <div class="gor-mid-good-top">
                <div>
                  订单号：
                  <span style="color:blue">{{scope.row.AllOrderNumber}}</span>
                </div>
                <div>{{scope.row.CreateTime}}</div>
              </div>
              <!-- go -->
              <div
                class="gor-mid-good-bot"
                v-for="(imgItem,imgIndex) in scope.row.OrderProductsList"
                :key="imgIndex"
              >
                <div class="gor-mid-good-bot-left">
                  <el-image v-image-preview style="width:60px;height:60px" :src="imgItem.ProductPhoto"></el-image>
                </div>
                <div class="gor-mid-good-bot-right">
                  <p class="gor-mid-good-bot-right-top">{{imgItem.ProductName}}</p>
                  <div class="gor-mid-good-bot-right-bot">
                    <div class="bot-left" style="color:red">￥{{imgItem.PayProductPrice}}</div>
                    <div class="twoline bot-right">{{imgItem.ProductModelStr}}{{imgItem.Weight}}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单总额">
          <template slot-scope="scope">
            <span style="color:red">￥{{scope.row.AllPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人" width="115">
          <template slot-scope="scope">
            <p>{{scope.row.ReceivingName}}</p>
            <p>{{scope.row.ReceivingPhoneNumber}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="SupplierName" label="供应商" width="150" ></el-table-column>
        <el-table-column prop="ReceivingTypeStr" label="订单类型">
          <!-- <template slot-scope="scope">
            <p v-show="scope.row.sale===1">团长分销</p>
            <p v-show="scope.row.sale===2">推荐返现</p>
          </template> -->
        </el-table-column>
        <el-table-column label="订单状态">
             <template slot-scope="scope">
            <p v-show="scope.row.StateStr==='已完成'" style="color:green">{{scope.row.StateStr}}</p>
            <p v-show="scope.row.StateStr==='未完成'" style="color:red">{{scope.row.StateStr}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="SalesManName" label="团长">
          <template slot-scope="scope">
            <p v-if="scope.row.SalesManName != ''">{{scope.row.SalesManName}}</p>
            <p v-else style="color:red">并无设置团长</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="godetail(scope.$index,scope.row.AllOrderNumber)" size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <botpage
      class="botpage-style"
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @handleSizeChange="pageSizeChange"
    />
    </div>
      
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import { LoadOrder, LoadSuppliers } from "@/request/api"
export default {
  created(){
    this.getTableDatas()
    this.getSuppSelect()
  },
  components: {
    Botpage,
  },
  methods: {
    getTableDatas() {
      LoadOrder({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS:"PC",
        OtherValues:"SU",
        StartTime:this.formInline.time
      }).then(res =>{
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for ( let i in this.tableData ) {
            that.tableData[i].CreateTime = this.tableData[i].CreateTime.replace(/(\/)/g,'-');
          }
      }).catch(err =>{
        console.log(err)
      })
    },
    getSuppSelect() {
      LoadSuppliers().then(res => {
        this.optionsss = res.Data;
      }).catch(err => {
        console.log(err)
      })
    },
    onSubmit() {
      this.getTableDatas()
    },
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableDatas()
    },
    check() {
      console.log("check done");
    },
    choose() {
      console.log("choose done");
    },
    async godetail(index,row) {
      let Gordetail = this.tableData[index]
      console.log(Gordetail)
      this.$router.push({
        path:"/gorderdetail",
        query:{ detail:this.tableData[index], AllOrderNumber : row}
      })
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableDatas();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableDatas();
    },
    getSTimes(val){
      this.formInline.time = val;
    }
  },
  data() {
    return {
      currentPage:1,
      PageSize:10,
      total:1,
      tableData:[],
      options: [
        {value: 1, label: "团长分销"},
        {value: 2,label: "推荐返现"},
      ],
      optionss: [
        {value: 1,label:"未完成"},
        {value: 2,label:"已完成"},
      ],
      optionsss:[],
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  
};
</script>

<style lang="less" scoped>
.gor-mid {
  margin: 30px auto;
  .gor-mid-good {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .gor-mid-good-top {
      flex: 1;
      display: flex;
      justify-content: space-between;
      font-size: 10px;
    }
    .gor-mid-good-bot {
      flex: 4;
      display: flex;
      .gor-mid-good-bot-right {
        flex: 2;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        margin-left: 10px;
        .gor-mid-good-bot-right-top {
          flex: 1;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .gor-mid-good-bot-right-bot {
          flex: 1;
          display: flex;
          justify-content: space-between;
          .bot-left {
            flex:1;
            display: flex;
            align-items: center;
          }
          .bot-right {
            flex: 3;
          }
        }
      }
    }
  }
}
</style>